<template>
  <div class="container">
    <el-card class="box-card">
      <el-button
        style="float: right"
        icon="el-icon-edit"
        type="success"
        size="small"
        @click="toQuestionNew"
      >新增试题</el-button>
      <br />
      <br />
      <br />
      <!-- 表单模块 -->
      <el-form ref="form" :model="form" label-width="80px" size="medium">
        <!-- 第一行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectsID">
              <el-select v-model="form.subjectsID" @change="updateOptions" placeholder="请选择">
                <el-option
                  v-for="item in subjectsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="directorysID">
              <el-select v-model="form.directorysID" placeholder="请选择">
                <el-option
                  v-for="item in directorysList"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tagsID">
              <el-select v-model="form.tagsID" placeholder="请选择">
                <el-option
                  v-for="item in tagsList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionTypeID">
              <el-select v-model="form.questionTypeID" placeholder="请选择">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简答" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficultyID">
              <el-select v-model="form.difficultyID" placeholder="请选择">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="directionID">
              <el-select v-model="form.directionID" placeholder="请选择">
                <el-option
                  v-for="(item,index) in directionList"
                  :key="index"
                  :label="item"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select v-model="form.creatorID" placeholder="请选择">
                <el-option label="超级管理员" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="企业简介" prop="shortName">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="城市" prop="provincesID">
              <el-select
                v-model="form.provincesID"
                @change="getCitysList"
                placeholder="请选择"
                style="width:50%"
              >
                <el-option
                  v-for="(item,index) in provinceList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select v-model="form.citysID" placeholder="请选择" style="width:50%">
                <el-option
                  v-for="(item,index) in citysList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 清除、搜索按钮 -->
          <el-col :span="6">
            <el-form-item style="float: right">
              <el-button @click="clearForm">清除</el-button>
              <el-button type="primary" @click="doSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 总数显示 -->
      <el-tag class="el-icon-info totalCount" type="info">&emsp;&emsp; 数据一共 {{counts}} 条</el-tag>
      <br />
      <br />
      <el-table :data="questionsList" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120" align="center"></el-table-column>
        <el-table-column prop="subject" label="学科" width="80" align="center"></el-table-column>
        <el-table-column prop="catalog" label="目录" width="80" align="center"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="80" align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.questionType==1">单选</p>
            <p v-if="scope.row.questionType==2">多选</p>
            <p v-if="scope.row.questionType==3">简答</p>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="180" align="center">
          <template slot-scope="scope">
            <p v-html="scope.row.question"></p>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="150"
          :formatter="dateFormat"
          align="center"
        ></el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.difficulty==1" type="success">简单</el-tag>
            <el-tag v-if="scope.row.difficulty==2" type="warning">一般</el-tag>
            <el-tag v-if="scope.row.difficulty==3" type="danger">困难</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100" align="center"></el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
            <!-- 预览按钮 -->
            <el-button
              @click="handlePreview(scope.row)"
              type="primary"
              icon="el-icon-view"
              plain
              circle
            ></el-button>
            <!-- 编辑按钮 -->
            <el-button
              @click="handleEdit(scope.row)"
              type="success"
              icon="el-icon-edit"
              plain
              circle
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              @click="delQuestion(scope.$index,scope.row)"
              type="danger"
              icon="el-icon-delete"
              plain
              circle
            ></el-button>
            <!-- 加入精选按钮 -->
            <el-button
              @click="addToChosen(scope.row)"
              type="warning"
              icon="el-icon-check"
              plain
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- 预览对话框 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%" @close="videoFlag=false">
        <!-- 第一行 -->
        <el-row>
          <el-col :span="6">
            <span>【题型】 ：{{dialog.questionType|questionTypeFilter}}</span>
          </el-col>
          <el-col :span="6">
            <span>【编号】 ：{{dialog.id}}</span>
          </el-col>
          <el-col :span="6">
            <span>
              【难度】 ：
              <span v-if="dialog.difficulty==1">简单</span>
              <span v-if="dialog.difficulty==2">一般</span>
              <span v-if="dialog.difficulty==3">困难</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>【标签】 ：{{dialog.tags}}</span>
          </el-col>
        </el-row>
        <br />
        <!-- 第二行 -->
        <el-row>
          <el-col :span="6">
            <span>【学科】 ：{{dialog.subjectName}}</span>
          </el-col>
          <el-col :span="6">
            <span>【目录】 ：{{dialog.directoryName}}</span>
          </el-col>
          <el-col :span="6">
            <span>【方向】 ：{{dialog.direction}}</span>
          </el-col>
        </el-row>
        <br />
        <hr />
        <p>
          【题干】 ：
          <span v-html="dialog.question" style="color:blue"></span>
        </p>
        <p>
          {{dialog.questionType|questionTypeFilter}}
          <span
            v-if="dialog.questionType==1"
          >选项 : （以下选中的选项为正确答案）</span>
          <span v-if="dialog.questionType==2">选项 : （以下选中的选项为正确答案）</span>
        </p>
        <!-- 单选选项 -->
        <div v-if="dialog.questionType==1">
          <el-radio
            v-for="item in dialog.options"
            :key="item.id"
            :value="isRight"
            :label="item.isRight"
            style="width:100%;marginTop:20px"
          >{{item.code}}. {{item.title}}</el-radio>
        </div>
        <!-- 多选选项 -->
        <div v-if="dialog.questionType==2">
          <el-checkbox-group :value="checkList">
            <el-checkbox
              v-for="item in dialog.options"
              :key="item.id"
              :value="isRight"
              :label="item.isRight"
              style="width:100%;marginTop:20px"
            >{{item.code}}. {{item.title}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <p>
          【参考答案】 ：
          <span v-html="dialog.answer"></span>
          <el-button type="danger" size="small" @click="showVideo">视频答案预览</el-button>
        </p>
        <video
          v-if="videoFlag"
          controls="controls"
          style="background-color: rgb(0, 0, 0); width: 100%; height: 100%; display: block;"
          :src="dialog.videoURL"
        ></video>
        <hr />
        <p>【答案解析】 ：{{dialog.answerID}}</p>
        <hr />
        <p>【题目备注】 ：{{dialog.remarks}}</p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
      <!-- 分页模块 -->
      <el-pagination
        class="page"
        @current-change="pageChange"
        :current-page="page"
        style="float: right"
        background
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        @size-change="sizeChange"
        layout="prev, pager, next, sizes, jumper"
        :total="counts"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from "@/api/hmmm/questions"
import { simple } from "@/api/hmmm/subjects"
import { list as directorysList } from "@/api/hmmm/directorys"
import { list as tagsList } from "@/api/hmmm/tags"
import { direction, questionType } from "@/api/hmmm/constants"
import { provinces, citys } from "@/api/hmmm/citys"
export default {
  data () {
    return {
      // 表单数据
      form: {
        subjectsID: null,
        directorysID: null,
        tagsID: null,
        keyword: null,
        remarks: null,
        shortName: null,
        questionTypeID: null,
        difficultyID: null,
        directionID: null,
        creatorID: null,
        provincesID: null,
        citysID: null,
      },
      //弹层数据
      dialog: {
        directoryName: '',
        chkState: 0,
        difficulty: "",
        direction: '',
        id: '',
        isChoice: 0,
        options: [],
        question: '',
        questionType: '',
        subjectName: '',
        tag: '',
        videoURL: ''
      },
      questionsList: [],
      counts: 0,
      page: 1,
      pagesize: 5,
      subjectsList: [],
      directorysList: [],
      tagsList: [],
      directionList: direction,
      provinceList: [],
      citysList: [],
      dialogVisible: false,
      radio: '1',
      videoFlag: false,
      isRight: 1,
      checkList: [1, 1, 1, 1, 1,]
    }
  },
  mounted () {
    this.getQuestionsList()
    this.getSubjectsList()
    this.getProvincesList()
  },
  // 题型转换过滤器
  filters: {
    questionTypeFilter (value) {
      const questionTypeObj = questionType.find(obj => obj.value == value)
      return questionTypeObj ? questionTypeObj.label : null
    }
  },
  methods: {
    // 新增试题跳转
    toQuestionNew () {
      this.$router.push({
        path: '/questions/new'
      })
    },
    //获取简单学科列表
    async getSubjectsList () {
      try {
        const res = await simple()

        this.subjectsList = res.data

      } catch (err) {
        console.log(err);
      }
    },
    //选择学科响应式更新相应目录标签下拉选项
    updateOptions () {
      this.getDirectorysList()
      this.getTagsList()
    },
    // 获取目录列表
    async getDirectorysList () {
      try {
        const res = await directorysList({
          subjectID: this.form.subjectsID
        })
        this.directorysList = res.data.items
      } catch (err) {
        console.log(err);
      }
    },
    // 获取标签列表
    async getTagsList () {
      try {
        const res = await tagsList({
          subjectID: this.form.subjectsID
        })
        this.tagsList = res.data.items
      } catch (err) {
        console.log(err);
      }
    },
    //获取省市数据
    async getProvincesList () {
      try {
        const res = await provinces()
        this.provinceList = res
        this.getCitysList()
      } catch (err) {
        console.log(err);
      }
    },
    //获取县区数据
    async getCitysList () {
      try {
        this.form.citysID = null
        const res = await citys(this.form.provincesID)
        this.citysList = res
      } catch (err) {
        console.log(err)
      }
    },
    //重置表单内容
    clearForm () {
      for (const key in this.form) {
        this.form[key] = null
      }
    },
    // 搜索功能
    async doSearch () {
      try {
        const res = await list({
          subjectID: this.form.subjectsID,
          keyword: this.form.keyword,
        })
        this.counts = res.data.counts
        this.questionsList = res.data.items
      } catch (err) {
        console.log(err)
      }
    },
    // 获取基础题库列表
    async getQuestionsList () {
      try {
        const res = await list({
          subjectID: this.form.subjectsID,
          keyword: this.form.keyword,
          page: this.page,
          pagesize: this.pagesize
        })
        this.counts = res.data.counts
        this.questionsList = res.data.items
      } catch (err) {
        console.log(err)
      }
    },
    //时间格式化
    dateFormat (row, column) {
      const date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return this.$moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    //点击翻页
    pageChange (page) {
      this.page = page
      this.getQuestionsList()
    },
    // 切换每页显示条数
    sizeChange (pagesize) {
      this.pagesize = pagesize
      this.page = 1
      this.getQuestionsList()
    },
    // 预览试题详情
    async handlePreview (row) {
      try {
        const res = await detail({
          id: row.id
        })
        this.dialog = res.data
        this.dialogVisible = true
      } catch (err) {
        console.log(err);
      }
    },
    // 显示视频解析
    showVideo () {
      this.videoFlag = true
    },
    // 编辑基础题库
    handleEdit (row) {
      this.$router.push({
        path: "/questions/new",
        query: {
          id: row.id,
        },
      });
    },
    // 基础题库删除
    delQuestion (index, row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({
          id: row.id
        }).then(() => {
          // this.questionsList.splice(index, 1)
          // this.counts -= 1
          if (this.questionsList.length === 1) {
            // this.page = this.page - 1
            this.page -= 1
          }

          this.getQuestionsList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '删除失败!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    //加入精选题库
    addToChosen (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        choiceAdd({
          id: row.id,
          choiceState: 1
        }).then(() => {
          this.$message({
            type: 'success',
            message: '加入精选题库成功!'
          })
          this.$router.push({
            path: '/questions/choice'
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '加入精选题库失败!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入精选题库'
        });
      })
    }
  }
}


</script>

<style scoped lang='less'>
.container {
  .box-card {
    width: 97%;
    margin: 20px;

    padding: 5px;
    /deep/.el-form {
      .el-form-item__label {
        font-size: 15px;
        font-weight: 700;
      }
    }
  }

  .totalCount {
    width: 100%;
    font-size: 14px;
    border: none;
    line-height: 36px;
    height: 36px;
    border-radius: 6px;
    padding-left: 18px;
  }
  .totalCount::before {
    margin-right: 7px;
  }
  .page {
    margin-top: 5px;
    margin-bottom: 15px;
  }
}
</style>
